<template>
	<view class="login-wrapper">
		<view class="logo-wrap">
			<view class="logo_icon">
				<image src="https://pcdcoin.oss-cn-chengdu.aliyuncs.com/pcdApp/login/logo.png" style="width: 100%;height: 100%;"></image>
			</view>
			<view class="logo_title">PCD Cloud</view>
		</view>
		<view class="form-wrap">
			<view class="form_acount">
				<image src="https://pcdcoin.oss-cn-chengdu.aliyuncs.com/pcdApp/login/zhanghu.svg" style="width: 20px;height: 20px;"></image>
				<input type="text" v-model="account" placeholder="账号/手机号" />
			</view>
			<view class="form_password">
				<image src="https://pcdcoin.oss-cn-chengdu.aliyuncs.com/pcdApp/login/password.svg" style="width: 20px;height: 20px;"></image>
				<input type="password" v-model="password" placeholder="用户密码" />
			</view>
		</view>
		<button type="primary" class="login__btn" @click="onLoginBtn">登录</button>
		<view class="account_handle">
			<view class="register_account" @click="register">注册账户</view>
			<view class="forget_pass" @click="forgetPass">忘记密码</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				account: "13227886910", // 账户
				password: "935494206" // 密码
			}
		},
		methods: {
			// 登录
			onLoginBtn() {
				uni.showLoading({
					title: '登录中...'
				});
				if (this.account == '') {
					uni.showToast({
						title: '请输入手机号',
						icon: 'none'
					});
					return;
				};
				if (this.password == '') {
					uni.showToast({
						title: '请输入密码',
						icon: 'none'
					});
					return;
				};
				this.$api.setLogin({
					mobile: this.account,
					password: this.password,
				}, (res) => {
					uni.hideLoading();
					if (res.data.type == 'ok') {
						let result = res.data.message
						uni.setStorageSync('user_token', result.token);
						// 验证ok账号是否绑定,0是没绑定，1是已绑定
						uni.reLaunch({
							url: '/pages/mine/index'
						})
					} else {
						uni.showToast({
							title: res.data.message,
							icon: 'none'
						});
					}
				})
			},

			// 跳转注册账号页面
			register() {
				uni.navigateTo({
					url: '/pages/login/register'
				})
			},

			// 跳转忘记密码页面
			forgetPass() {
				uni.navigateTo({
					url: '/pages/login/forgetPass'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.login-wrapper {
		height: 100vh;
		background-color: rgba(59,60,78,1);
	}

	.logo-wrap {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		padding-top: 117px;

		.logo_icon {
			width: 114px;
			height: 74px;
			margin: 0 auto;
		}

		.logo_title {
			margin-top: 12px;
			font-size: 18px;
			color: #ffffff;
		}
	}

	.form-wrap {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		margin-top: 40px;

		.form_acount,
		.form_password {
			position:relative;
			display: flex;
			justify-content: space-between;
			align-items: center;
			width: 80%;
			height: 35px;
			padding: 0 10px;
			margin-bottom: 20px;
			font-size: 15px;

			input {
				width: 88%;
				height: 30px;
				outline-style: none;
				color: #ffffff;
				&:focus {
					border-color: #409eff;
				}
			}
		}
		.form_acount:after{
		    content:"";
			position:absolute;
		    bottom:0;
		    left:0;
		    right:0;
		    border-top:1px solid rgba(255,255,255,0.1);
		    -webkit-transform:scaleY(.5);
		    -webkit-transform-origin:0 0;
		}
		.form_password:after{
		    content:"";
			position:absolute;
		    bottom:0;
		    left:0;
		    right:0;
		    border-top:1px solid rgba(255,255,255,0.1);
		    -webkit-transform:scaleY(.5);
		    -webkit-transform-origin:0 0;
		}
	}

	.login__btn {
		width: 82%;
		margin: 15px auto;
		background-color: #E03E4D;
		border-radius: 50upx;
	}

	.account_handle {
		width: 80%;
		display: flex;
		justify-content: space-between;
		margin: 0 auto;
		color: #FFFFFF;
	}
</style>
